<template>
	<view class="car-box flex-column" :style="boxStyle">
		<view class="car-list-top" v-if="dataList.length">
			<view>共 {{dataList.length}} 件商品</view>
			<view v-if="isEdit" @tap="toReEdit">完成</view>
			<view v-else @tap="isEdit = true">管理</view>
		</view>
		<view class="car-scroll flex-column-100">
			<qh-scroll-view parent-el-name=".car-scroll" @init="initScroll" refresher-enabled :lower-enabled="false" @refresherrefresh="refresherrefresh"
				:refresher-triggered="isRefrash">
				<view v-if="empty" class="car-empty">
					<image mode="widthFix" src="https://safood.supplyocta.com/Public/MallSmallApp/emptycar-1.png"></image>
					<view class="car-empty-tips">购物车空空如也</view>
					<view class="car-empty-btn" @tap="goShop">点击去购物</view>
				</view>
				<view class="car-list-item" v-for="(item, index) in dataList" :key="index">
					<view class="car-list-item-box" :class="{'raduis-right-none': moveId == item.id && moveWidth > 20}"
						:style="moveId == item.id && moveWidth > 20 ? ('margin-left:-' + moveWidth + 'px') : ''">
						<view class="car-list flex" @touchstart="touchStart($event, item.id)" @touchmove="touchMove">
							<view class="car-goods-choose flex-cn-cn">
								<qh-radio v-model="item.checked" :disabled="item.error == 1 && !isEdit" padding="20"></qh-radio>
							</view>
							<view class="car-list-goods-img" @tap.stop="todetails(item.goods_id)">
								<qh-goods-image class="car-goods-image" :src="item.goods_img" size="164" radius="6"></qh-goods-image>
								<!-- <view v-if="item.goods_num<=0" class="goods-sell-empty">已售空</view> -->
							</view>
							<view class="car-list-right flex-col-spb">
								<view class="car-list-goods-name" @tap.stop="todetails(item.goods_id)">{{item.goods_name}}</view>
								<view class="car-goods-sku" v-if="item.attribute_state == 2" @tap="changeSku(index)">
									<view class="car-goods-sku-detail-box">
										<view class="car-goods-sku-detail">{{item.sku_name}}</view>
									</view>
									<text class="qh-rt-single qh-rt-a-zu4421 car-goods-list__sku-icon"></text>
								</view>
								<view v-if="item.error==1" class="car-goods-error">{{item.reason}}</view>

								<!-- 价格显示部分 -->
								<view class="car-list-price-box flex-spb-cn">
									<!-- 开启促销 -->
									<view class="car-list-price" v-if="item.promotion_status == 1" @tap.stop="todetails(item.goods_id)">
										<text>￥{{item.act_price}}</text>
										<block v-if="item.act_price<item.online_price">
											<text class="price_pass">￥{{item.online_price}}</text>
										</block>
									</view>
									<!-- 未开启促销 -->
									<view class="car-list-price" v-else @tap.stop="todetails(item.goods_id)">
										<view v-if="showPlusPrice(item)" class="flex-cn">
											<text class="plus-price-color">￥{{item.plus_price}}</text>
											<text class="plus-price-icon">PLUS</text>
										</view>
										<view v-if="showVipPrice(item)" class="flex-cn">
											<text class="price-color">￥{{item.shop_mem_price}}</text>
											<text class="vip-price-icon">VIP</text>
										</view>
										<view v-if="showOnlinePrice(item)">
											<text>￥{{item.online_price}}</text>
										</view>
									</view>
									<view class="choose-sku-change border">
										<text class="qh-rt-single qh-rt-a-zu4424 choose-sku-change-icon" @click.stop="setDec(index)"></text>
										<view class="choose-sku-num">
											<input v-if="item.can_change_num==1" :disabled="item.error == 1" min="1"
												:type="goods.pricing_method==1?'number':'digit'" @blur="blurGoods($event, index)" v-model="item.num"
												placeholder="1" placeholder-class="choose-sku-p"></input>
											<text v-else>{{item.num}}</text>
										</view>
										<text class="qh-rt-single qh-rt-jia1 choose-sku-change-icon" @click.stop="setInc(index)"></text>
									</view>
								</view>
							</view>
						</view>
						<view class="car-delivery flex-cn" @tap.stop="todetails(item.goods_id)">
							<block v-for="(it, a) in item.delivery_set" :key="a">
								<text class="qh-rt-single qh-rt-xuanze4 car-delivery-icon" :class="{'checked': it.data == 1}"></text>
								<text class="car-delivery-text">{{it.name}}</text>
							</block>
						</view>
						<view class="car-delete flex-cn-cn" :style="item.delStyle" @tap="deleteProd(index)">删除</view>
					</view>
				</view>
				<qh-loaded-tip v-if="dataList.length && isLoadCarGoods" text="已显示全部"></qh-loaded-tip>
			</qh-scroll-view>
		</view>
		<!-- 底部按钮 -->
		<view class="car-bottom">
			<view v-if="delivery_status == 1" style="padding: 0 30rpx;background:rgba(var(--primary-rgb-color), 0.15)">
				<express-fee :delivery_cost="delivery_cost" background="transparent" iconColor="var(--primary-color)"></express-fee>
			</view>
			<view class="total-bottom" :class="{'tabbar-page-bottom': type == 1}" :style="footerStyle">
				<qh-radio v-model="allChecked" @change="changeAllCheck" padding="20">
					<text class="car-footer__check-text" :class="{'checked': allChecked}">全选</text>
				</qh-radio>
				<view class="flex-cn">
					<view class="car-bottom-price">
						<text>合计:</text>
						<text>￥{{checkedTotal}}</text>
					</view>
					<view v-if="isEdit" @tap="del" class="car-bottom-btn flex-cn-cn">删除</view>
					<block v-else>
						<login-and-register v-if="checkedCount > 0 && userInfo.platform_type == 2 && !userInfo.vid" :type="userInfo.login_state == 1 ? 4 : 3"
							@success="toSettlement">
							<view class="car-bottom-btn flex-cn-cn" :class="{'car-bottom-btn-disabled': checkedCount == 0}">
								结算({{checkedCount}})
							</view>
						</login-and-register>

						<view v-else @tap="toSettlement" class="car-bottom-btn flex-cn-cn" :class="{'car-bottom-btn-disabled': checkedCount == 0}">
							结算({{checkedCount}})
						</view>
					</block>
				</view>
			</view>
		</view>

		<!-- 规格 -->
		<block v-if="showSelectSku">
			<choose-sku :sku="sku" :goodsinfo="goods" :user_type="user_type" @close="closeSku"></choose-sku>
		</block>
	</view>
</template>

<script>
	var app = getApp().globalData;
	import expressFee from '@/components/express-fee.vue'
	import toDecimal from '@/utils/toDecimal.js'
	import qhScrollMixin from "@/components/qh-scroll-view/mixins.js";
	export default {
		name: "store-shopping-car",
		mixins: [qhScrollMixin], // 使用mixin
		components: {
			expressFee,
		},
		props: {
			type: {
				type: [Number, String],
				default: 1,
			}
		},
		data() {
			return {
				count: 0,
				allChecked: false,
				checkedIds: [],
				checkIndexs: [],
				checkedCount: 0,
				vipDiscount: 1,
				dataList: [],
				isLoadCarGoods: false,

				isEdit: false, //是否正在管理
				user_type: 1,
				store_id: 0,
				showSelectSku: false,
				sku: {
					showChangeNum: false, //是否显示选择数量
					btnText: '确定', //按钮文字
				},
				goods: {},
				canLoad: true, //是否可以加载
				isLoading: false,
				isRefrash: false,
				page: 0,
				limit: 10,
				empty: "",
				delivery_status: 0,
				delivery_cost: '',
				userInfo: {}, // 用户信息
				//移动
				delBtnWidth: uni.upx2px(130),
				moveId: '',
				moveStartX: 0,
				moveStartY: 0,
				moveWidth: 0,
			};
		},
		computed: {
			checkedTotal() {
				let total = 0;
				let checkedIds = [];
				let checkIndexs = [];
				let naturalCheckCount = 0;
				let checkShopCarIds = {};
				this.dataList.forEach((item, index) => {
					if (item.checked) {
						if (!item.error || this.isEdit) {
							naturalCheckCount++;
						}
						checkShopCarIds[item.id] = true;
						checkedIds.push(item.id);
						checkIndexs.unshift(index);
						let price = item.online_price;
						let discount = 1;

						if (item.promotion_status != 1) {
							// 会员
							if (this.$store.userInfo.type == 2 && item.plus_mem_status == 1 && item.plus_price !== null) {
								price = item.plus_price;
							} else if (this.$store.userInfo.type != 1) {
								discount = item.vip_online_state == 1 ? this.vipDiscount : 1;
								if (item.shop_mem_status == 1 && item.shop_mem_price !== null) {
									price = item.shop_mem_price;
								}
							}
						} else if (item.promotion_status == 1) {
							price = item.act_price;
						}

						total = toDecimal(toDecimal(toDecimal(price * discount) * item.num) + total);
					}
				})
				this.checkedCount = checkedIds.length;
				this.checkedIds = checkedIds;
				this.checkIndexs = checkIndexs;
				this.allChecked = naturalCheckCount > 0 && this.checkedCount == naturalCheckCount;
				if (this.dataList.length) {
					//防止初始化时被重置
					this.$store.storeCheckShopCarIds = checkShopCarIds;
				}
				return total;
			},
			boxStyle() {
				let b = `--popup-content-bottom:${this.type == 1 ? (this.$store.bottomHeight + 110) : 0}rpx;`;
				return b + `height: calc(100vh - ${this.$store.statusBarHeight + 44}px)`;
			},
			footerStyle() {
				return this.type == 1 ? `height:calc(124rpx + var(--tabbar-height))` :
					`height: ${124 + this.$store.bottomHeight}rpx;padding-bottom:${this.$store.bottomHeight}rpx`;
			},
		},
		async created() {
			await this.$onLaunched;
			this.userInfo = {
				...app.XcxData.userInfo
			};
		},
		methods: {
			async onLoads(options) {
				this._freshing = false;
				// #ifdef MP-ALIPAY
				if (JSON.stringify(options) == '{}') {
					options = my.getLaunchOptionsSync().query;
				}
				// #endif
				if (options && (options.store_id)) {
					this.$store.store_id = options.store_id;
				}
				await this.$onLaunched;
				await this.getVipDisCount();
			},
			async onShows() {
				await this.$onLaunched;
				getApp().globalData.resetStoreId();

				if (this.$store.store_id != this.store_id) {
					//判断是否切换门店
					this.store_id = this.$store.store_id;
					this.dataList = [];
				}
				uni.removeStorageSync('shopping_ids')
				this.getData();
			},
			//修改选择状态
			changeAllCheck(val) {
				this.dataList.forEach((item) => {
					item.checked = val && this.isEdit || !item.error ? val : false;
				})
			},
			//编辑完成
			toReEdit() {
				this.dataList.forEach(item => {
					if (item.error == 1 && item.checked) {
						item.checked = false;
					}
				})
				this.isEdit = false;
			},
			//获取会员折扣
			async getVipDisCount() {
				if (this.$store.userInfo.type == 1) return this.vipDiscount = 1;
				const {
					status,
					data
				} = await this.$request('SmallProgramApi/Vip/getVipDetails');
				if (status == 1) {
					this.userInfo = data;
					this.vipDiscount = data.discount;
					this.user_type = data.user_type;
				}
			},
			// 下拉刷新
			async refresherrefresh() {
				this.isRefrash = true;
				await this.getData();
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 800
				});
				this.isRefrash = false;
			},
			goShop() {
				uni.reLaunch({
					url: '/pages/store/store'
				});
			},
			// 查看详情
			todetails(id) {
				uni.navigateTo({
					url: '/pages/product/details/details?id=' + id
				});
			},
			//减少数量
			setDec(index) {
				if (this.dataList[index].num > 1) {
					let item = {
						...this.dataList[index]
					};
					item.num--;
					this.$set(this.dataList, index, item);
					this.$mutations.setShoppingCar({
						id: item.id,
						goods_id: item.goods_id,
						sku_id: item.sku_id,
						num: item.num,
						goods_type: 2,
					})
				}
			},
			//增加数量
			async setInc(index) {
				let item = {
					...this.dataList[index]
				};
				this.$set(this.dataList, index, item);
				const status = await this.$mutations.setShoppingCar({
					id: item.id,
					goods_id: item.goods_id,
					sku_id: item.sku_id,
					num: item.num + 1,
					goods_type: 2,
				})
				if (status) {
					item.num++;
				}
			},
			//关闭规格弹窗
			closeSku(data) {
				this.showSelectSku = false;
				if (this.dataList.length && data) {
					let obj = {
						...this.dataList[this.changeSkuIndex],
						sku_id_list: data.sku_id_list,
						sku_id: data.sku_id,
						sku_name: data.sku_name,
						online_price: data.online_price,
						shop_mem_price: data.shop_mem_price,
						plus_price: data.plus_price,
						goods_img: data.image,
					};
					//查找购物车中是否含有相同规格的商品
					let index = this.dataList.findIndex(item => item.id != obj.id && item.goods_id == obj.goods_id && (!item.sku_id || item.sku_id == obj.sku_id));
					if (index >= 0) {
						//合并购物车
						let oldItem = {
							...this.dataList[index],
							num: toDecimal(this.dataList[index].num * 1 + obj.num),
						};
						this.$set(this.dataList, index, oldItem);
						this.dataList.splice(this.changeSkuIndex, 1);
						this.count--;
						this.updateStoreCar();
					} else {
						this.$set(this.dataList, this.changeSkuIndex, obj);
					}
				} else {
					this.getData();
				}
			},
			//更新全局购物车
			updateStoreCar() {
				let goodsList = [];
				this.dataList.forEach(item => {
					goodsList.push({
						id: item.id,
						goods_id: item.goods_id,
						sku_id: item.sku_id,
						num: item.num
					})
				})
				this.$store.storeShoppingGoodsList = goodsList;
			},
			//点击修改规格
			changeSku(index) {
				this.changeSkuIndex = index;
				this.goods = {
					...this.dataList[index],
				};
				this.sku.btnText = '确定';
				this.sku.showChangeNum = false;
				this.showSelectSku = true;
			},
			//失焦
			blurGoods(e, index) {
				let item = {
					...this.dataList[index]
				};
				if (e.detail.value == '') {
					item.num = 1;
				}
				this.$set(this.dataList, index, item);
				this.$mutations.setShoppingCar({
					id: item.id,
					goods_id: item.goods_id,
					sku_id: item.sku_id,
					num: item.num,
					goods_type: 2
				})
			},
			//结算 按钮的点击事件
			toSettlement() {
				if (!this.checkedCount) return uni.showToast({
					title: '请选择商品',
					duration: 1000,
					icon: "none",
					mask: false
				});

				let delivery_set = [1, 1, 1];
				this.dataList.forEach(item => {
					if (item.checked) {
						for (let j = 0; j < 3; j++) {
							if (item.delivery_set[j].data == 0) {
								delivery_set[j] = 0;
							}
						}
					}
				})
				if (delivery_set[0] == 0 && delivery_set[1] == 0 && delivery_set[2] == 0) return uni.showModal({
					title: '提示',
					content: '您选择的商品暂不支持同种发货方式，请分开选择结算！',
					confirmText: '重新选择',
					showCancel: false,
				});

				uni.setStorageSync('shopping_ids', JSON.stringify(this.checkedIds))
				uni.removeStorageSync('blessData')
				uni.navigateTo({
					url: '/pages/order/Settlement/Settlement?shopping_ids=' + JSON.stringify(this.checkedIds)
				});
			},

			//开始移动
			touchStart(e, id) {
				if (this.isEdit) return;
				this.moveId = id;
				this.moveWidth = 0;
				if (e.touches.length == 1) {
					this.moveStartX = e.touches[0].clientX;
					this.moveStartY = e.touches[0].clientY;
				}
			},
			//移动中
			touchMove(e) {
				if (this.isEdit) return;
				if (e.touches.length == 1) {
					let x = this.moveStartX - e.touches[0].clientX;
					let y = this.moveStartY - e.touches[0].clientY;
					
					if (y > 20 || y < -20) return this.moveWidth = 0, this.moveStartY; //纵向移动就撤回
					
					if (x <= 0) {
						x = 0
					} else if (x > this.delBtnWidth) {
						x = this.delBtnWidth;
					}

					this.moveWidth = x;
				}
			},
			//多个删除
			async del() {
				if (!this.checkedCount) return uni.showToast({
					title: '未选择商品',
					duration: 800,
					icon: 'none'
				})
				const res = await this.submitDel(this.checkedIds);
				if (!res) return;

				//删除购物车中的数据
				for (let i in this.checkIndexs) {
					this.dataList.splice(this.checkIndexs[i], 1);
				}
				//删除全局购物车中的数据
				let len = this.$store.storeShoppingGoodsList.length;
				for (let i = len - 1; i >= 0; i--) {
					if (this.checkedIds.indexOf(this.$store.storeShoppingGoodsList[i].id) != -1) {
						this.$store.storeShoppingGoodsList.splice(i, 1);
					}
				}
				this.count = this.dataList.length;
				if (!this.dataList.length) {
					this.empty = true;
				}
			},
			//单删
			async deleteProd(index) {
				const res = await this.submitDel([this.dataList[index].id]);
				if (!res) return;

				this.dataList.splice(index, 1);

				//删除全局购物车中的数据
				let i = this.$store.storeShoppingGoodsList.findIndex(item => item.id = this.dataList[index].id);
				this.$store.storeShoppingGoodsList.splice(i, 1);
				this.count--;
				if (!this.dataList.length) {
					this.empty = true;
				}
			},
			//提交删除商品
			submitDel(ids) {
				return new Promise(resolve => {
					uni.showModal({
						title: '温馨提示',
						content: '确认将这' + ids.length + '个商品从购物车中删除？',
						confirmText: '删除',
						cancelText: '取消',
						success: async (res) => {
							if (!res.confirm) return resolve(false);
							const {
								status,
								data,
								message
							} = await this.$request('SmallProgramApi/Shopping/deleteShopping_v1', {
								id: JSON.stringify(ids)
							});
							if (status == 1) {
								uni.showToast({
									title: message,
									duration: 800,
								})
								resolve(true)
							} else {
								uni.showToast({
									title: message,
									duration: 800,
									icon: 'none'
								})
								resolve(false)
							}
						}
					})
				})
			},
			//获取购物车商品列表
			async getData() {
				const {
					status,
					data,
					message
				} = await this.$request('SmallProgramApi/Shopping/getShoppingGoods_v4', { store_id: this.$store.mallStoreId });
				if (status != 1) return;
				this.count = data.count;
				//设置全局购物车的数据
				let goodsList = [];
				let checkShopCarIds = this.$store.storeCheckShopCarIds;
				data.list.forEach(item => {
					item.checked = checkShopCarIds[item.id] ? true : false;
					goodsList.push({
						id: item.id,
						goods_id: item.goods_id,
						sku_id: item.sku_id,
						num: item.num
					})
				})
				this.dataList = data.list;
				this.$store.storeShoppingGoodsList = goodsList;

				if (!data.list.length) {
					this.empty = true;
				} else {
					this.empty = false;
				}

				this.delivery_cost = data.delivery_cost;
				this.delivery_status = data.delivery_status;

				this.isLoadCarGoods = true;
			},

			// 展示plus会员价条件
			showPlusPrice(item) {
				return app.showPlusPrice(item)
			},

			// 展示会员价条件
			showVipPrice(item) {
				return app.showVipPrice(item)
			},

			// 展示普通价格
			showOnlinePrice(item) {
				return app.showOnlinePrice(item)
			}
		}

	}
</script>

<style lang="scss">
	.car-box {
		width: 100vw;
		overflow: hidden;
	}

	.car-scroll {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.car-scroll-view {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.car-empty {
		width: 100%;
		height: calc(100vh - 200rpx);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.car-empty>image {
		width: 300rpx;
		margin-left: -20px;
	}

	.car-empty-tips {
		font-size: 30rpx;
		margin-top: 36rpx;
		color: #999;
	}

	.car-empty-btn {
		color: #3879d9;
		margin-top: 10rpx;
	}

	.car-list-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 30rpx;
		font-size: 28rpx;
		color: #333;
		width: 100%;
	}

	.car-list-top>view {
		padding: 20rpx 30rpx;
	}

	.car-list-item {
		width: 100%;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
	}

	.car-list-item-box {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 0 0;
		background: white;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;
		border-radius: 6px;
		transition: 0.1s;

		&.raduis-right-none {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
	}

	.car-delivery {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 15rpx 20rpx;
		border-top: 1rpx solid #f5f5f5;
		box-sizing: border-box;

		.car-delivery-icon {
			font-size: 28rpx;
			line-height: 28rpx;
			color: #C8C9CB;

			&.checked {
				color: var(--primary-color);
			}
		}

		.car-delivery-text {
			color: #666;
			font-size: 24rpx;
			line-height: 28rpx;
			margin: 0 30rpx 0 8rpx;
		}
	}

	.car-list {
		box-sizing: border-box;
		padding: 20rpx 0 30rpx;
		position: relative;
		width: 100%;
	}

	.car-goods-choose {
		min-height: 180rpx;
		box-sizing: border-box;
	}

	.car-list-goods-img {
		margin: 8rpx 0;
	}

	.car-list-right {
		flex: 1;
		min-height: 180rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		align-items: flex-start;
	}

	.car-list-goods-name {
		max-width: 100%;
		font-size: 28rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		align-content: center;
		line-height: 38rpx;
		margin-bottom: 10rpx;
	}

	.car-goods-sku {
		display: inline-block;
		background-color: #f8f8f8;
		line-height: 30rpx;
		margin-top: 10rpx;
		border-radius: 6rpx;
		position: relative;
		white-space: nowrap;
		margin-bottom: 10rpx;
	}

	.car-goods-sku-detail-box {
		display: inline-block;
		vertical-align: top;
	}

	.car-goods-sku-detail {
		color: #999;
		font-size: 24rpx;
		margin: 12rpx 0 12rpx 20rpx;
		white-space: pre-wrap;
		word-break: break-all;
		max-width: calc(100vw - 444rpx);
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		align-content: center;
		line-height: 34rpx;
	}

	.car-goods-list__sku-icon {
		display: inline-block;
		vertical-align: top;
		margin-top: 14rpx;
		font-size: 18rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
		color: #999999;
	}

	.car-goods-error {
		color: #ff3d3d;
		font-size: 22rpx;
		margin-top: 20rpx;
	}

	.car-list-price-box {
		width: 100%;
	}

	.car-list-price {
		font-size: 28rpx;
		color: #ff3d3d;
		margin-right: 10rpx;
	}

	.car-delete {
		color: white;
		justify-content: center;
		align-items: center;
		width: 130rpx;
		height: 100%;
		flex-shrink: 0;
		background: #f84747;
		font-size: 14px;
		position: absolute;
		right: -130rpx;
		top: 0;
		border-top-right-radius: 8rpx;
		border-bottom-right-radius: 8rpx;
	}

	.car-bottom {
		width: 100%;
		min-height: 100rpx;
		background: white;
	}

	.car-bottom-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.total-bottom {
		height: 100rpx;
		padding: 0 30rpx 0 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #eee;
		box-sizing: border-box;
	}

	.total-bottom>view {
		position: relative;
		z-index: 1;
		height: 100%;
	}

	.car-footer__check-text {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #999999;

		&.checked {
			color: #333333;
		}
	}

	.car-bottom-price {
		display: flex;
		align-items: flex-end;
	}

	.car-bottom-price>text:nth-child(1) {
		font-size: 22rpx;
		color: #333;
		padding-right: 10rpx;
		line-height: 28rpx;
	}

	.car-bottom-price>text:nth-child(2) {
		font-size: 30rpx;
		color: #ff3d3d;
		line-height: 30rpx;
	}

	.car-bottom-btn {
		height: 72rpx;
		width: 182rpx;
		background: linear-gradient(to right, rgba(var(--primary-rgb-color), 0.7), var(--primary-color));
		color: white;
		margin-left: 20rpx;
		border-radius: 40rpx;
		font-size: 28rpx;

		&.disabled {
			background: #d8d8d8;
		}
	}
</style>
